<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title></title>
  <!--引入vue-->
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <!--引用路由-->
  <!--<script type="text/javascript" th:src="@{js/vue-router.js}"></script>-->
  
  <!--<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>-->
  
  <script type="text/javascript" th:src="@{js/vue.min.js}"></script>
  <!--引入样式 -->
  <link rel="stylesheet" th:href="@{css/element.css}">
  <!-- 引入组件库 -->
  <script type="text/javascript" th:src="@{js/element.js}"></script>
</head>
<body>
  <div>

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>首页</title>
    </head>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
      body{
        padding: 0px;
        margin: 0px;
        background-color: lavender;
      }
      .sum{
        width: 100%;
        height: 100%;
        display: table;
        margin: 0 auto;
      }
      .clearfix{
        width:100% ;
        height: 50px;
        background-color: darkcyan;
        color:white;
        overflow: auto;
      }
      .zc{
        float: left;
        padding-left:60%;
        padding-top: 10px;

      }
      .text-gs{
        height: 150px;
        background-color: white;
        padding-top: 20px;
        padding-left: 20px;
      }
      .bank{
        padding-top: 20px;
      }
      .hdader{
        height: 50px;
        background-color: white;
        margin-top: 20px;
      }
    </style>
    <body>
    <div class="sum">
      <div class="hdader">
        <h4 style="padding-top: 8px;padding-left: 20px">新闻资讯</h4>
      </div>

      <div class="clearfix">
        <span class="float-left" style="padding-left:150px;padding-top: 10px">个人理财简介</span>
        <span class="float-right" style="padding-top: 10px;padding-right: 150px">2020-12-02</span>
      </div>
      <div class="text-gs">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;个人理财，是在对个人收入、资产、负债等数据进行分析整理的基础上，
          根据个人对风险的偏好和承受能力，结合预定目标运用诸如储蓄、保险、证券、外汇、收藏、住房投资等多种手段管理资产和负债，
          合理安排资金，从而在个人风险可以接受范围内实现资产增值的最大化的过程。</p>

      </div>


      <div class="bank">
        <div class="clearfix">
          <span class="float-left" style="padding-left:150px;padding-top: 10px">书籍推荐</span>
          <span class="float-right" style="padding-top: 10px;padding-right: 150px">2020-12-02</span>
        </div>
        <div class="text-gs">
          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《个人理财(第4版)》是一本探讨个人如何更好地通过投资理财活动让财富不断增加的实用教材。
            全书包括五个部分，共十八章，分别从理财规划基础知识和基本概念、如何管理好自己的金钱、如何利用保险保护自己、
            如何更好地进行投资管理以及需要注意的生命周期内财务事件等方面出发，对个人理财的各种技巧和方法进行深入浅出而又细致全面的讲解，
            建立起了一个非常完整的理财框架体系。</p>
        </div>
      </div>

    </div>
    </body>
    </html>
    <div class="demo-type">
      <div>
        <el-avatar icon="el-icon-user-solid"></el-avatar>
      </div>
      <div>
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
      </div>
      <div>
        <el-avatar>  </el-avatar>
      </div>
    </div>

  </div>
</body>
<script>

</script>
</html>